import { Component, OnInit, Input, OnChanges } from "@angular/core";
import { StatBase } from "../statistics/stat-base";
import { UtilService } from "src/app/core/util/util.service";

@Component({
    selector: "app-common-stat",
    templateUrl: "./common-stat.component.html",
    styleUrls: ["./common-stat.component.scss"]
})
export class CommonStatComponent extends StatBase implements OnChanges {
    @Input() type: string;
    @Input() list: any[] = [];

    data: any = {
        typeName: "",
        unit: ""
    };
    kpis: any[] = [];
    optChange0: any = {};
    optChange1: any = {};
    optChange2: any = {};

    constructor(private util: UtilService) {
        super();
    }

    ngOnChanges(): void {
        switch (this.type) {
            case "section":
                this.kpis = [
                    {
                        name: "测流形式",
                        attr: "flmlType"
                    },
                    {
                        name: "实际流量",
                        unit: 'm³/s',
                        attr: "sectionActualFlow"
                    },
                    {
                        name: "断面水深",
                        unit: 'm',
                        attr: "sectionDepth"
                    }
                ];
                break;
            case "paishuigou":
                this.data = {
                    typeName: "排水沟",
                    unit: "条"
                };
                this.kpis = [
                    {
                        name: "穿越形式",
                        attr: "crossType"
                    },
                    {
                        name: "实际排水能力",
                        unit: 'm³/s',
                        attr: "actualDrainageCapacity"
                    },
                    {
                        name: "长度",
                        unit: 'km',
                        attr: "length"
                    }
                ];
                break;
            case "shanhonggou":
                this.data = {
                    typeName: "山洪沟",
                    unit: "座"
                };
                this.kpis = [
                    {
                        name: "穿（入）渠形式",
                        attr: "crossArea"
                    },
                    {
                        name: "流域面积",
                        unit: 'km²',
                        attr: "floodArea"
                    },
                    {
                        name: "最大洪峰流量",
                        unit: 'm³/s',
                        attr: "maxFlow"
                    }
                ];
                break;
            case "handong":
            case "ducao":
                this.data = {
                    typeName: this.type == "handong" ? "涵洞" : "渡槽",
                    unit: "座"
                };
                this.kpis = [
                    {
                        name: "结构形式",
                        attr: "structure"
                    },
                    {
                        name: "过水能力",
                        unit: 'm³/s',
                        attr: "actualCapacity"
                    },
                    {
                        name: "长度",
                        unit: 'm',
                        attr: "length"
                    }
                ];
                break;
            case "qiaoliang":
                this.data = {
                    typeName: "桥梁",
                    unit: "座"
                };
                this.kpis = [
                    {
                        name: "结构形式分布",
                        attr: "type"
                    },
                    {
                        name: "长度",
                        unit: 'm',
                        attr: "length"
                    },
                    {
                        name: "宽度",
                        unit: 'm',
                        attr: "width"
                    }
                ];
                break;
            case "yiliuyan":
                this.data = {
                    typeName: "溢流堰",
                    unit: "座"
                };
                this.kpis = [
                    {
                        name: "左右堤分布",
                        attr: "leftRightBank"
                    },
                    {
                        name: "设计溢流能力",
                        unit: 'm³/s',
                        attr: "designedCapacity"
                    },
                    {
                        name: "实际溢流能力",
                        unit: 'm³/s',
                        attr: "actualCapacity"
                    }
                ];
                break;
        }
        this.renderChart();
    }

    renderChart() {
        let dataList: any[];
        let dataMapper: any;
        let top5DataMapper: any;
        this.kpis.map((kpi, idx) => {
            dataList = this.util.getItemValues(this.list, kpi.attr, idx != 0);
            dataMapper = this.util.getScatterMapper(dataList);
            top5DataMapper = this.util.getTop5Mapper(this.util.getScatterMapper(dataList));
            if (idx == 0) {
                this.optChange0 = {
                    title: {
                        text: kpi.name
                    },
                    series: [
                        {
                            data: Object.keys(top5DataMapper).map(key => {
                                return {
                                    value: top5DataMapper[key],
                                    name: key
                                };
                            })
                        }
                    ]
                };
            } else {
                this[`optChange${idx}`] = {
                    title: {
                        text: `${kpi.name}分布`
                    },
                    xAxis: {
                        name: kpi.unit ? `${kpi.name}(${kpi.unit})` : kpi.name
                    },
                    tooltip: {
                        trigger: 'item',
                        axisPointer: {type: 'none'},
                        formatter: params => {
                            return `${kpi.name}： ` + params.value[0] + `${kpi.unit}` + '<br>' +
                                '数量： ' + params.value[1] + '个';
                        }
                    },
                    series: this.util.getScatterData(dataMapper)
                };
            }
        });
    }
}
